import {useState} from "react";
import {Row, Col} from 'antd';
import {getTimeDistance} from "@/utils/utils";
import 'dayjs/locale/zh-cn';
import ChargeStatistics from "./components/ChargeStatistics";
import ChargeTable from "./components/ChargeTable";
import ChargeAmountAnalyze from "./components/ChargeAmountAnalyze";
import ChargeNumAnalyze from "./components/ChargeNumAnalyze";
import ChargeUsersAnalyze from "./components/ChargeUsersAnalyze";
import styles from "./styles.less";


const App = () => {
  const [chargeStatisticsRangePickerValue, setChargeStatisticsRangePickerValue] = useState(getTimeDistance('today'));
  const [chargeTablePayload, setChargeTablePayload] = useState({pageNum: 1, pageSize: 15, param: {paid: -1}});
  const [chargeAmountAnalyzeRangePickerValue, setChargeAmountAnalyzeRangePickerValue] = useState(getTimeDistance('today'));
  const [chargeNumAnalyzeRangePickerValue, setChargeNumAnalyzeRangePickerValue] = useState(getTimeDistance('today'));
  const [chargeUsersAnalyzeRangePickerValue, setChargeUsersAnalyzeRangePickerValue] = useState(getTimeDistance('today'));

  return (
    <div className={styles.myContainer}>
      <Row gutter={5}>
        <Col xl={15} lg={24} md={24} sm={24} xs={24}>
          <ChargeStatistics data={{
            rangePickerValue: chargeStatisticsRangePickerValue,
            setRangePickerValue: setChargeStatisticsRangePickerValue
          }}/>
          <ChargeTable data={{
            tablePayload: chargeTablePayload,
            setTablePayload: setChargeTablePayload
          }}/>
        </Col>
        <Col xl={9} lg={24} md={24} sm={24} xs={24}>
          <ChargeAmountAnalyze data={{
            rangePickerValue: chargeAmountAnalyzeRangePickerValue,
            setRangePickerValue: setChargeAmountAnalyzeRangePickerValue
          }}/>
          <ChargeNumAnalyze data={{
            rangePickerValue: chargeNumAnalyzeRangePickerValue,
            setRangePickerValue: setChargeNumAnalyzeRangePickerValue
          }}/>
          <ChargeUsersAnalyze data={{
            rangePickerValue: chargeUsersAnalyzeRangePickerValue,
            setRangePickerValue: setChargeUsersAnalyzeRangePickerValue
          }}/>
        </Col>
      </Row>
    </div>
  );
};

export default App;
